<template>
  <div class="welfare-center-container">
    <!-- 签到送云豆区域 -->
    <div class="sign-in-section">
      <div class="section-content">
        <div class="section-header">
          <h2 class="section-title">签到送云豆</h2>
          <el-button type="primary" class="sign-in-btn" @click="handleSignIn">立即签到</el-button>
        </div>

        <!-- 签到日历 -->
        <div class="sign-in-calendar">
          <div v-for="day in SignInfoList" :key="day" class="day-card"
            :class="{ 'day-signed': signInState.signedDays.includes(day), 'day-current': day.day == signInState.checkInDays }">
            <div class="day-content">
              <div class="day-number">第<i>{{ day.day }}</i>天</div>
              <div class="reward-icon">
                <div v-if="day.singed == true" class="signed-icon">已 签</div>
                <div v-else class="cloud-bean-icon"></div>
              </div>
              <div class="reward-amount">{{ day.coin }}云豆</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 邀请好友区域 -->
    <!-- <div class="invite-friends-section">
      <h2 class="section-title">邀请好友</h2>
      <el-button class="invite-btn" @click="handleInviteFriends">邀请好友</el-button>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import successIcon from '@/assets/images/success-icon.png'
import errorIcon from '@/assets/images/error-icon.png'
import warningIcon from '@/assets/images/warning-icon.png'
import { checkIn, getSignInfo } from '@/api/user';
import { useLoginCheck } from '@/utils/auth.js'
// 引入登录检查模块
const { checkAndPerform } = useLoginCheck()

const SignInfoList = ref([]);

const userStore = useUserStore()

// 签到状态数据
const signInState = ref({
  checkInDays: null, // 当前是第几天
  signedDays: [1], // 已签到的天数
  totalReward: 1000, // 已获得的总云豆数
  isTodaySigned: false // 今天是否已签到
})

onMounted(() => {
  console.log('WelfareCenter mounted');
  // 初始化签到信息
  initSignInfo();
});

const initSignInfo = async () => {
  getSignInfo().then((res) => {
    SignInfoList.value = res.info.records;
    signInState.value.checkInDays = res.info.checkInDays;
    console.log(SignInfoList.value);
    // const { checkInDays, signedDays, totalReward } = res.data;
    // signInState.value.checkInDays = checkInDays;
    // signInState.value.signedDays = signedDays;
    // signInState.value.totalReward = totalReward;
    // signInState.value.isTodaySigned = signedDays.includes(checkInDays);
  });
}


// 立即签到处理函数
const handleSignIn = () => {
  // 检查登录并执行操作
  checkAndPerform(() => {
    if (signInState.value.isTodaySigned) {
      ElMessage({
        type: 'warning',
        customClass: 'custom-warning-message-icon',
        dangerouslyUseHTMLString: true,
        message: `<img src="${warningIcon}" alt="warning-icon" style="width: 20px; height: 20px; margin-right: 4px;">今日已签到`,
        offset: 65
      })
      return
    }
    checkIn().then((res) => {
      // 重新获取签到信息
      initSignInfo();
      // 模拟签到过程
      signInState.value.signedDays.push(signInState.value.checkInDays)
      signInState.value.totalReward += 1000
      signInState.value.isTodaySigned = true
      // 获取用户信息
      userStore.setCoin()
      ElMessage({
        type: 'success',
        customClass: 'custom-success-message-icon',
        dangerouslyUseHTMLString: true,
        message: `<img src="${successIcon}" alt="success-icon" style="width: 20px; height: 20px; margin-right: 4px;">签到成功`,
        offset: 65
      })
    }).catch((err) => { });
  });
}

// 邀请好友处理函数
const handleInviteFriends = () => {
  console.log('打开邀请好友弹窗')
  // 实际项目中这里应该打开邀请好友的弹窗或跳转到邀请页面
}
</script>

<style lang="scss" scoped>
.welfare-center-container {
  .sign-in-section {
    background: url('@/assets/images/Rectangle_bg.png') no-repeat;
    background-size: cover;
    border-radius: 4px;
    margin-bottom: 30px;

    .section-content {
      height: 322px;
      padding: 30px;
      box-sizing: border-box;
      background: url('@/assets/images/Rectangle_bg_up.png') no-repeat;
      background-position: top right;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        .section-title {
          font-size: 20px;
          font-weight: 600;
          color: #e2e2e2;
        }

        .sign-in-btn {
          width: 80px;
          height: 32px;
          background-color: #ffe500;
          border-color: #ffe500;
          color: #121517;
          font-size: 14px;
          border-radius: 4px;

          // &:hover { 
          //   background-color: #ffbb33;
          //   border-color: #ffbb33;
          // }
        }
      }

      .sign-in-calendar {
        display: flex;
        gap: 24px;
        justify-content: space-between;

        .day-card {
          width: 115px;
          height: 172px;
          background: linear-gradient(0deg, #232527 0%, #424343 100%);
          border-radius: 4px;
          border: 1px solid #424343;
          transition: all 0.3s ease;

          box-sizing: border-box;

          .day-content {
            width: 100%;
            background: url('@/assets/images/Union.png') no-repeat;
            // background-size: cover;
            background-position: top right;
            padding: 16px 10px;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          &.day-current {
            border-color: #ffaa00;
            // background-color: rgba(255, 170, 0, 0.1);
            background: linear-gradient(0deg, rgba(84, 68, 22, 0.3) 0%, rgba(84, 68, 22, 0.3) 100%);
          }

          &.day-signed {
            background-color: #3E4041;
            position: relative;
          }

          .day-number {
            color: #949495;
            font-size: 14px;

            i {
              font-size: 28px;
              font-weight: bold;
              font-style: italic !important;
            }
          }

          .reward-icon {
            width: 50px;
            height: 50px;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;

            .cloud-bean-icon {
              width: 100%;
              height: 100%;
              background-image: url('@/assets/images/cloud_pea_icon.png');
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
            }

            .signed-icon {
              width: 100%;
              height: 100%;
              background-color: rgba(255, 255, 255, 0.2);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: rgba(255, 255, 255, 0.5);
              ;
              font-size: 14px;
              font-weight: 600;
              rotate: -30deg;
            }
          }

          .reward-amount {
            width: 83px;
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            color: #fff;
            background: #404141;
            text-align: center;
            border-radius: 4px;
          }
        }
      }
    }
  }

  .invite-friends-section {
    height: 84px;
    background-color: #232527;
    border-radius: 4px;
    padding: 0 30px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .section-title {
      font-size: 16px;
      color: #ffffff;
    }

    .invite-btn {
      width: 80px;
      height: 32px;
      line-height: 32px;
      background-color: #121517;
      border: 1px solid #121517;
      color: #ffffff;
      font-size: 14px;
      border-radius: 4px;

      // &:hover {
      //   border-color: #3c9cff;
      //   color: #3c9cff;
      // }
    }
  }
}
</style>